<section id="content">
  <div class="block">
    <header>
      <div class="top-right text-gray"><strong><a class="href-gray" href="javascript:;" onclick="$('#add-new-set').fadeIn('slow');$(this).remove()" title="Přidat nový set">Přidat nový set</a></strong></div>
      <h2>Upravit fotografické sety</h2>
    </header>
    <section class="block-body">
      <form id="add-new-set" class="hide" action="<?php echo url::base(); ?>profile/add_set/" method="post">
        <fieldset>
          <ul>
            <li>
              <label for="title">Název nového setu:</label>
              <input type="text" id="title" name="title" value="" class="text" />
            </li>
            <li>
            <input type="submit" name="form-submit" value="Vytvořit"  />
            </li>
          </ul>
        </fieldset>
      </form>
      <?php foreach ($user_sets as $set): ?>
      <table id="photo-set-<?php  echo $set->id ?>" class="styled">
        <thead>
          <tr><th><?php echo $set->title ?></th></tr>
        </thead>
        <tbody>
      <?php foreach ($set->photo_source->find_all() as $item): ?>
        <tr id="photo-id-<?php echo $item->id ?>"><td><?php echo $item->filename ?></td></tr>
      <?php endforeach ?>
        <tr><td style="text-align: center">
            <strong><a class="href-gray ajax-photo-add" href="javascript:;" onclick="addNewPhoto($(this))" title="Přidat novou fotografii">Přidat novou fotografii</a></strong>
        </td></tr>
        </tbody>
      </table>      
      <?php endforeach ?>
      <div id="dialog-confirm">
        <p>Skutečně chcete tuto fotografii ze setu odtranit?</p>
      </div>
    </section>
  </div>
  <div class="block-bottom"></div>
</section>
<div id="ajax-photos" class="hide">
  <form method="post">
  <fieldset>
    <ul>
      <li>
        <label for="ajax-photos-add">Přidat fotografii:</label>
        <div class="container-tags">
          <input id="ajax-photos-add" class="text ajax-photos" type="text" name="tags" value="Zadejte jméno fotografie" onclick="this.value='';" />
        </div>
      </li>
    </ul>
  </fieldset>
  </form>
  <div id="ajax-photos-content" class="hide"></div>
</div>
<script>
$(function() {

  $("#dialog-confirm").hide();

  $( "#ajax-photos-add" ).autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "/ajax/search_photos_name",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function( data ) {
          response( $.map( data, function( item ) {
            var d = new Date(parseInt(item.date));
            return {
              label: item.title +' ('+ d.getDate() +'.'+ (d.getMonth()+1) +'. ' +d.getFullYear()+')',
              value: "",
              id: item.id,
              object: item
            }
          }));
        }
      });
    },
    minLength: 1,
    select: function( event, ui ) {
      log( ui.item ?
        ui.item : 0);
    }
  });




});

  var items = [];

  function log( objectItem ) {
    if ( objectItem.id in items ) {
      return false;
    } else {
      $.ajax({
        url: "/ajax/search_photos_group",
        dataType: "json",
        data: {
          id: objectItem.id
        },
        success: function( data ) {
          items[objectItem.id] = true;
          $.each(data, function(i,item) {
            $('#ajax-photos-content').append('<a href="javascript:;" onclick="addThisPhoto($(this),\''+item.id+'\');" title="Přidat fotografii do setu"><img src="/files/users/jonny/m_'+item.filename+'" alt="'+objectItem.object.title+' ('+item.id+')" /></a>');
          });
          $('#ajax-photos-content').delay(250).fadeIn('slow');
        }
      });
    }
  }

function addNewPhoto(element) {
  items = []
  $('#ajax-photos-content').hide().empty();
  element.after($('#ajax-photos'));
  $('#ajax-photos').fadeIn('slow');
  $('a.ajax-photo-add').show();
  element.hide();
}

function addThisPhoto(element,id) {
  $.ajax({
    url: "/ajax/photo_to_set",
    dataType: "json",
    data: {
      id: id,
      toSetId: element.closest('table.styled').attr("id")
    },
    success: function( data ) {
      element.closest('table.styled').fadeIn().append('<tr id="'+id+'"><td>Fotografie &mdash; id '+id+' byla úspěšně přidána.</td></tr>');
      element.remove();
    }
  });
}

function photoDelete(number,id) {
  $("#dialog-confirm").dialog({
    resizable: false,
    width: 400,
    minHeight: 40,
    modal: true,
    draggable: false,
    closeOnEscape: true,
    open: function(event, ui) { $(".ui-dialog-titlebar-close,.ui-dialog-titlebar").remove(); },
    buttons: {
      "Odstranit": function() {
        $('#tag'+number+'').remove();
        $( this ).dialog( "close" );
      },
      "Zavřít": function() {
        $( this ).dialog( "close" );
      }
    }
  });
}
</script>

